import React from 'react';
import { Form, Modal, Radio, Select, message } from 'antd';
import Api from 'Utils/api';
import CURRENT_STATE from 'Constants/interactiveConstants';
import './index.scss';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const AdviceForm = Form.create()(
  (props) => {
    const { form, initialValue } = props;
    const { getFieldDecorator } = form;
    return (
      <Form>
        <FormItem
          label="状态:"
        >
          {
            getFieldDecorator('handle_state', {
              initialValue: initialValue.handle_state ? initialValue.handle_state.toString() : CURRENT_STATE.UN_PROCESS.toString(),
            })(
              <Select placeholder="请输入处理状态" className="sel-input" style={{ width: 600 }} >
                <Option key={CURRENT_STATE.UN_PROCESS} >未处理</Option >
                <Option key={CURRENT_STATE.PROCESSING} >处理中</Option >
                <Option key={CURRENT_STATE.PROCESS_COMPLETE} >已处理</Option >
              </Select >
            )
          }
        </FormItem>
        <FormItem
          label="是否公开:"
        >
          {
            getFieldDecorator('is_shown', {
              initialValue: initialValue.is_shown ? initialValue.is_shown : false,
            })(
              <RadioGroup>
                <Radio value>公开</Radio>
                <Radio value={false}>不公开</Radio>
              </RadioGroup>
            )
          }
        </FormItem>
      </Form>
    );
  }
);

class EditAdviceModal extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      loading: false,
    };
  }

  showModal(record) {
    this.setState({
      visible: true,
      record: record
    }, () => {
      this.form.resetFields();
    });
  }

  close() {
    this.setState({
      loading: false,
      visible: false,
    });
  }

  handleOk() {
    const formValue = this.form.getFieldsValue();
    if (!formValue.handle_state) {
      message.error('请填写完整信息');
      return;
    }
    const api = new Api({
      method: 'PATCH',
      path: `/reports/admin/${this.state.record.id}`,
      query: {
        handle_state: formValue.handle_state,
        is_shown: formValue.is_shown,
      },
      success: () => {
        this.setState({ loading: true });
        this.props.onEdit();
        this.close();
      }
    });
    api.run();
  }

  render() {
    return (
      <div>
        <Modal
          className="addAltair-modal small-modal"
          title="处理投诉举报"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={() => {
            this.close();
          }}
          confirmLoading={this.state.loading}
          width={500}
        >
          <AdviceForm
            initialValue={this.state.record}
            ref={(ref) => { this.form = ref; }}
          />
        </Modal>
      </div>
    );
  }
}

export default EditAdviceModal;
